<script setup lang="ts">
  import SvgIcon from '../SvgIcon/index.vue';
  import { CodeSandboxCircleFilled } from '@ant-design/icons-vue';
</script>
<template>
  <div>
    <div class="header-title">
      <CodeSandboxCircleFilled color="#999999" style="width: 1.2258rem" />
      <span class="header-title-separator"></span>
      <span class="header-title-label">支撑平台</span>
    </div>
    <div class="header-user">
      <SvgIcon name="svg-github" size="large" color="#999999" />
      <span class="header-user-label">用户名</span>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .header-title {
    float: left;
    &-separator {
      background: #e7e7e7;
      width: 1px;
      height: 18px;
      background: #e7e7e7;
      display: inline-block;
      vertical-align: middle;
    }
    &-label {
      margin-left: 12px;
      font-size: 18px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.65);
    }
  }

  .header-user {
    float: right;
    &-label {
      margin-left: 8px;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
</style>
